<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>鑫享人生金喜无限,免费观影-泰康人寿</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="${ctxStatic}/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <style>
        body{
            margin:0px;
            padding:0px;
            color: #ffffff;
            font-family: "Microsoft YaHei"
        }
        div#bgDiv{
            background: none;
        }
        div#bgDiv > img {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0px;
            right: 0px;
            height: 100%;
            width: 100%;
            border: 0;
            z-index: -999;
        }
        .playDiv{
            position: absolute;
            left: 20%;
            bottom: 5%;
        }
        ul{
            margin: 10px 10px 10px 10px;
            padding: 0px;
        }
        li {
            list-style: none;
            line-height: 36px;
            font-weight: bold;
            margin: 0px;
        }
        .header{
            margin: 30px 0px 30px 0px;
        }
        .header .title {
            text-align: center;
        }
        .content{
            position: absolute;
            top: 15%;
            margin-top: 20px;
            padding: 5px;
            color: #000;
            display: none;
        }
        .content .question {
            padding-left: 5px;
            line-height: 32px;
            font-size: 18px;
            font-weight: bold;
        }
        .content .answer{
            padding: 5px 0px 5px 0px;
        }
        .content .answer input[type='radio']{
            margin-right: 5px;
        }
        .form{
            padding: 5px 30px 5px 30px;
            margin-top: 15px;
        }
        .modal-header {
            background: #9B0A0A;
            padding: 10px 5px 10px 5px;
            color: #FFFFFF;
            font-weight: bold;
        }
        .modal-title {
            font-size: 18px;
            font-weight: bold;
        }
        .modal-content {
            margin: 0 auto;
            margin-top: 30%;
            width: 98%;
            color:#000000;
        }
        .modal-body {
            padding: 10px;
        }
        .modal-footer {
            padding: 5px;
            text-align: center;
        }
        .button{
            color: #666;
            background-color: #EEE;
            border-color: #EEE;
            font-weight: 300;
            font-size: 16px;
            font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            text-decoration: none;
            text-align: center;
            line-height: 40px;
            height: 40px;
            padding: 0 40px;
            margin: 0;
            display: inline-block;
            appearance: none;
            cursor: pointer;
            border: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition-property: all;
            transition-property: all;
            -webkit-transition-duration: .3s;
            transition-duration: .3s;
        }
        .button-caution, .button-caution-flat{
            background-color: #C50717;
            border-color: #FF4351;
            color: #FFF;
        }
        .button-pill {
            border-radius: 200px;
        }
        .button-rounded {
            border-radius: 4px;
        }
        .button-jumbo {
            font-size: 24px;
            height: 60px;
            line-height: 60px;
            padding: 0 60px;
        }
        .button-royal, .button-royal-flat {
            background-color: #7B72E9;
            border-color: #7B72E9;
            color: #FFF;
        }
        a, a:visited {
            color: #229ffd;
        }
    </style>
</head>
<body>
<div id="bgDiv">
    <img id="bg1" src="${ctxStatic}/images/wechat/tk/bg.png" />
    <img id="bg2" src="${ctxStatic}/images/wechat/tk/bg2.png" style="display: none;"/>
    <div class="playDiv">
        <input type="button" class="button button-caution button-pill button-jumbo" name="playBtn" id="playBtn" value="立即参与">
    </div>
    <input type="hidden" name="cardNo" id="cardNo" value="${param.cardNo}">
    <div class="content">
        <div class="step1" style="display: none;">
            <div class="question">
                1.你是否愿意参与本次泰康“鑫享人生”扫二维码免费看电影活动？
            </div>
            <div class="answer">
                <ul>
                    <li style="width: 45%;">
                        <input type="radio" name="isAgree" value="1">参加
                    </li>
                    <li style="width: 45%;">
                        <input type="radio" name="isAgree" value="0">不参加
                    </li>
                </ul>
            </div>
        </div>
        <div class="step2" style="display: block;">
            <div class="question">
                1.请选择您愿意前往的观影区域
            </div>
            <div class="answer">
                <ul>
                    <li>
                        <input type="radio" name="movieArea" value="futian">福田
                    </li>
                    <li>
                        <input type="radio" name="movieArea" value="longgang">龙岗
                    </li>
                    <li>
                        <input type="radio" name="movieArea" value="longhua">龙华
                    </li>
                    <li>
                        <input type="radio" name="movieArea" value="baoan">宝安
                    </li>
                    <li>
                        <input type="radio" name="movieArea" value="shajing">沙井
                    </li>
                    <li>
                        <input type="radio" name="movieArea" value="yantian">盐田
                    </li>
                </ul>
            </div>
        </div>
        <div class="step3 four" style="display: none;">
            <div class="question">
                <h4>2.请选择你愿意前往影院的观影时间</h4>
            </div>
            <div class="answer">
                <ul>
                    <li>
                        <input type="radio" name="movieTime" value="2015年6月1日19:40">2015年6月1日19:40（儿童节）
                    </li>
                    <li>
                        <input type="radio" name="movieTime" value="2015年6月6日19:40">2015年6月6日19:40（周六）
                    </li>
                    <li>
                        <input type="radio" name="movieTime" value="2015年6月13日19:40">2015年6月13日19:40（周六）
                    </li>
                    <li>
                        <input type="radio" name="movieTime" value="2015年6月27日19:40">2015年6月27日19:40（周六）
                    </li>
                </ul>
            </div>
        </div>
        <div class="step3 two" style="display: none;">
            <div class="question">
                <h4>2.请选择你愿意前往影院的观影时间</h4>
            </div>
            <div class="answer">
                <ul>
                    <li>
                        <input type="radio" name="movieTime" value="2015年6月1日19:40">2015年6月1日19:40（周六）
                    </li>
                    <li>
                        <input type="radio" name="movieTime" value="2015年6月6日19:40">2015年6月6日19:40（周六）
                    </li>
                </ul>
            </div>
        </div>
        <div class="step4" style="display: none;">
            <div class="question">
                3.请您输入你的姓名与手机号码方便我们及时提醒您观影时间地点
            </div>
            <div class="form">
                <form name="customInfo" id="customInfo" method="post" class="form-horizontal">
                    <div class="alert alert-warning alert-dismissible fade in" style="margin-bottom: 10px;display: none;" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <strong id="errorInfo"></strong>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <input type="text" id="name" name="name" class="form-control" style="height: 50px;font-size:22px;" placeholder="请输入您的姓名" maxlength="11">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <input type="tel" id="mobile" name="mobile" class="form-control" style="height: 50px;font-size:22px;" placeholder="请输入手机号码" maxlength="11">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <button type="button" class="button button-royal button-rounded button-jumbo" id="submit" style="width: 100%;">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--成功提示-->
        <div class="success" style="display: none;margin: 10px;line-height: 30px;font-size: 16px;">
            恭喜您成功参与“鑫享人生，免费观影”活动，稍后我们会将您的具体观影时间和地点发送至您的手机，感谢您的参与！
        </div>
    </div>
</div>
    <div class="modal fade" id="msgModal" tabindex="-1" role="dialog" aria-labelledby="msgModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="msgModalLabel">系统消息</h4>
                </div>
                <div class="modal-body" >

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="msgBtn">知道了</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="${ctxStatic}/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //立即参与
        $("#playBtn").click(function(){
            $(".playDiv").hide();
            $("#bg1").hide();
            $("#bg2").show();
            $(".content").show();
        });
        //判断第一步
        $(":radio[name='isAgree']").click(function(){
            var _this = this;
            var isAgress = $(_this).val();
            if(isAgress=="1"){
                $(".step1").hide();
                $(".step2").show();
            }else{

            }
        });

        //判断第二步
        $(":radio[name='movieArea']").click(function(){
            var _this = this;
            var movieArea = $(_this).val();
            if(movieArea=="futian" || movieArea == "baoan" || movieArea == "longgang"){
                $(".step2").fadeOut("fast");
                $(".step3.four").fadeIn("slow");
            }else{
                $(".step2").fadeOut("fast");
                $(".step3.two").fadeIn("slow");
            }
        });

        //第三题
        $(":radio[name='movieTime']").click(function(){
            var _this = this;
            var movieTime = $(this).val();
            $(".step3").hide();
            $(".step4").show();
        });

        //提交事件
        $("#submit").click(function(){
            //是否参与
            var isAgree = $(":radio[name='isAgree']:checked").val();
            isAgree = 1;
            //观影区域
            var movieArea = $(":radio[name='movieArea']:checked").val();
            //观影时间
            var movieTime = $(":radio[name='movieTime']:checked").val();
            movieTime = (movieTime==undefined || movieTime == null) ? "" : movieTime;
            //手机号码
            var mobile = $("#mobile").val();
            //用户姓名
            var name = $("#name").val();
            if(isAgree == undefined || isAgree == ""){
                openTip("亲,出错了","请先同意参与游戏");
                return false;
            }
            if(movieArea == undefined || movieArea == ""){
                openTip("亲,出错了","请先选择观影地区");
                return false;
            }
            if(name == undefined || name == ""){
                openTip("亲,出错了","请输入真实姓名,不然我怎么证明你是你");
                return false;
            }
            if (!mobile) {
                openTip("亲,出错了","亲，你不填写手机号码,我怎么发送观影信息给你呢");
                return false;
            }
            if (!(/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8]))\d{8}$/.test(mobile))) {
                openTip("亲,出错了","亲，请按套路出牌,输入正确的手机号码");
                return false;
            }
            if(!(/^[\u4e00-\u9fa5]{2,30}$/.test(name))){
                openTip("亲，出错了", "请输入2-10个汉字");
                return false;
            }
            var cardNo = $("#cardNo").val();
            //提交信息
            $.post("${appctx}/tk/movie/getFreeMovie",{
                isAgree:isAgree,
                movieArea:movieArea,
                movieTime:movieTime,
                mobile:mobile,
                cardNo:cardNo,
                realName:name
            },function(data){
                if(data.result == "success"){
                    $(".step4").hide();
                    $(".success").show();
                }else{
                    openTip("错误提示",data.msg);
                }
            });
        });
    });

    //系统提示消息
    function openTip(title,msg,btnValue,func){
        btnValue = btnValue || "知道了";
        title = title || "系统消息";
        $("#msgModalLabel").text(title);
        $("#msgModal").find(".modal-body").text(msg);
        $("#msgBtn").text(btnValue);
        func = func || function(){
                    $("#msgModal").modal("hide");
                };
        $("#msgModal").delegate("#msgBtn","click",func);
        $("#msgModal").modal();
        return false;
    }
</script>
</html>
